import { Box, Flex, Heading, IconButton, useColorMode, useColorModeValue } from '@chakra-ui/react';
import { FaSun, FaMoon } from 'react-icons/fa';

const Header = () => {
  const { colorMode, toggleColorMode } = useColorMode();
  const bgColor = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');

  return (
    <Box
      as="header"
      bg={bgColor}
      borderBottom="1px"
      borderColor={borderColor}
      px={4}
      py={3}
      position="sticky"
      top="0"
      zIndex="sticky"
      shadow="sm"
    >
      <Flex alignItems="center" justifyContent="space-between" maxW="container.md" mx="auto">
        <Heading as="h1" size="lg" color="brand.500">
          LingoLearn
        </Heading>
        <IconButton
          aria-label="Toggle color mode"
          icon={colorMode === 'light' ? <FaMoon /> : <FaSun />}
          onClick={toggleColorMode}
          variant="ghost"
          fontSize="lg"
        />
      </Flex>
    </Box>
  );
};

export default Header;
